<template>
  <div class="child1">
    <h2>子组件1</h2>
	玩具：{{ toy }}
	书本数:{{ book_num }}

	<button @click="decrementHouse($parent)">干掉父亲一套房产</button>
	
  </div>
</template>

<script setup lang="ts" name="Child1">
	
	import {ref} from 'vue'

	let toy = ref('奥特曼')
	let book_num = ref(1)

	function decrementHouse(parent:any){
		console.log("@@@@@",parent)
		parent.house = parent.house - 1
	}




	//这是把定义的数据交给外部，外部可以使用 不然就算拿到这个对象也无法修改内部的值，
	//例如father 无法更改 child1 的toy
	defineExpose({toy,book_num})

</script>

<style scoped>
	.child1{
		margin-top: 20px;
		background-color: skyblue;
		padding: 20px;
		border-radius: 10px;
    box-shadow: 0 0 10px black;
	}
</style>
